<template>
  <div class="container">
    <el-space direction="vertical" alignment="flex-start" v-for="item in 50" :key="item">
      <el-skeleton :loading="loading" animated :throttle="500">
        <template #template>
          <el-skeleton-item variant="image" />
          <div style="padding: 14px">
            <el-skeleton-item variant="h3" style="width: 50%" />
            <div style="
              display: flex;
              align-items: center;
              justify-items: space-between;
              margin-top: 16px;
              height: 16px;
            ">
              <el-skeleton-item variant="text" style="margin-right: 16px" />
              <el-skeleton-item variant="text" style="width: 30%" />
            </div>
          </div>
        </template>
        <template #default>
          <el-card :body-style="{ padding: '0px', marginBottom: '1px' }">
            <img src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
              class="image" />
            <div style="padding: 14px">
              <span>Delicious hamburger</span>
              <div class="bottom card-header">
                <div class="time">{{ currentDate }}</div>
                <el-button text class="button">operation button</el-button>
              </div>
            </div>
          </el-card>
        </template>
      </el-skeleton>
    </el-space>
  </div>
</template>



<script lang="ts" setup>
import { ref } from "vue"

const loading = ref(false)
const currentDate = new Date().toDateString()

</script>

<style lang="less" scoped>
.container {
  display: grid;
  grid-template-rows: repeat(4, 1fr);
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}


/* 合并第一行的01和第二行的01 */
</style>
